<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="Hexo Theme Keep">
    <meta name="description" content="Hexo Theme Keep">
    <meta name="author" content="Tckapco">
    
    <title>
        
            网络安全-XSS,CSRF |
        
        Tckapco
    </title>
    
<link rel="stylesheet" href="/css/style.css">

    <link rel="shortcut icon" href="/images/logo.svg">
    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"theboat.gitee.io","root":"/","language":"en"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true,"init_open":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.jpg","favicon":"/images/logo.svg","article_img_align":"left","left_side_width":"260px","content_max_width":"920px","hover":{"shadow":false,"scale":true},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"Keep writing and Keep loving."},"scroll":{"progress_bar":{"enable":false},"percent":{"enable":false}}},"local_search":{"enable":false,"preload":false},"code_copy":{"enable":true,"style":"mac"},"pjax":{"enable":false},"lazyload":{"enable":false},"version":"3.4.5"};
    KEEP.language_ago = {"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days ago","week":"%s weeks ago","month":"%s months ago","year":"%s years ago"};
  </script>
<meta name="generator" content="Hexo 5.4.0"></head>


<body>
<div class="progress-bar-container">
    

    
</div>


<main class="page-container">

    

    <div class="page-main-content">

        <div class="page-main-content-top">
            <header class="header-wrapper">

    <div class="header-content">
        <div class="left">
            
            <a class="logo-title" href="/">
                Tckapco
            </a>
        </div>

        <div class="right">
            <div class="pc">
                <ul class="menu-list">
                    
                        <li class="menu-item">
                            <a class=""
                               href="/"
                            >
                                HOME
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/archives"
                            >
                                ARCHIVES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/categories"
                            >
                                CATEGORIES
                            </a>
                        </li>
                    
                        <li class="menu-item">
                            <a class=""
                               href="/links"
                            >
                                LINKS
                            </a>
                        </li>
                    
                    
                </ul>
            </div>
            <div class="mobile">
                
                <div class="icon-item menu-bar">
                    <div class="menu-bar-middle"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/">HOME</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/archives">ARCHIVES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/categories">CATEGORIES</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/links">LINKS</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


        </div>

        <div class="page-main-content-middle">

            <div class="main-content">

                
                    <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">网络安全-XSS,CSRF</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/images/avatar.jpg">
                </div>
                <div class="info">
                    <div class="author">
                        <span class="name">Tckapco</span>
                        
                            <span class="author-label">Lv2</span>
                        
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-edit"></i>&nbsp;
        <span class="pc">2021-05-27 10:13:01</span>
        <span class="mobile">2021-05-27 10:13</span>
    </span>
    
        <span class="article-categories article-meta-item">
            <i class="fas fa-folder"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/categories/%E7%BD%91%E7%BB%9C%E5%AE%89%E5%85%A8/">网络安全</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    
    
        <span class="article-tags article-meta-item">
            <i class="fas fa-tags"></i>&nbsp;
            <ul>
                
                    <li>
                        <a href="/tags/XSS-CSRF/">XSS,CSRF</a>&nbsp;
                    </li>
                
            </ul>
        </span>
    

    
    
        <span class="article-wordcount article-meta-item">
            <i class="fas fa-file-word"></i>&nbsp;<span>3.8k Words</span>
        </span>
    
    
        <span class="article-min2read article-meta-item">
            <i class="fas fa-clock"></i>&nbsp;<span>13 Mins</span>
        </span>
    
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <h1 id="XSS"><a href="#XSS" class="headerlink" title="XSS"></a>XSS</h1><h2 id="1-什么是-XSS？"><a href="#1-什么是-XSS？" class="headerlink" title="1.什么是 XSS？"></a>1.什么是 XSS？</h2><p>Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。</p>
<p>为了和 CSS 区分，这里把攻击的第一个字母改成了 X，于是叫做 XSS。</p>
<p>XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。</p>
<p>而由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或者利用这些信息冒充用户向网站发起攻击者定义的请求。</p>
<p>在部分情况下，由于输入的限制，注入的恶意脚本比较短。但可以通过引入外部的脚本，并由浏览器执行，来完成比较复杂的攻击策略。</p>
<p>这里有一个问题：用户是通过哪种方法“注入”恶意脚本的呢？</p>
<p>不仅仅是业务上的“用户的 UGC 内容”可以进行注入，包括 URL 上的参数等都可以是攻击的来源。在处理输入时，以下内容都不可信：</p>
<ul>
<li>来自用户的 UGC 信息</li>
<li>来自第三方的链接</li>
<li>URL 参数</li>
<li>POST 参数</li>
<li>Referer （可能来自不可信的来源）</li>
<li>Cookie （可能来自其他子域注入）</li>
</ul>
<h2 id="2-XSS-分类"><a href="#2-XSS-分类" class="headerlink" title="2.XSS 分类"></a>2.XSS 分类</h2><h3 id="存储型-XSS"><a href="#存储型-XSS" class="headerlink" title="存储型 XSS"></a>存储型 XSS</h3><p>存储型 XSS 的攻击步骤：</p>
<ol>
<li>攻击者将恶意代码提交到目标网站的数据库中。</li>
<li>用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML 中返回给浏览器。</li>
<li>用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。</li>
<li>恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。</li>
</ol>
<p>这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论、用户私信等。</p>
<h3 id="反射型-XSS"><a href="#反射型-XSS" class="headerlink" title="反射型 XSS"></a>反射型 XSS</h3><p>反射型 XSS 的攻击步骤：</p>
<ol>
<li>攻击者构造出特殊的 URL，其中包含恶意代码。</li>
<li>用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。</li>
<li>用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。</li>
<li>恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。</li>
</ol>
<p>反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库里，反射型 XSS 的恶意代码存在 URL 里。</p>
<p>反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。</p>
<p>由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。</p>
<p>POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。</p>
<h3 id="DOM-型-XSS"><a href="#DOM-型-XSS" class="headerlink" title="DOM 型 XSS"></a>DOM 型 XSS</h3><p>DOM 型 XSS 的攻击步骤：</p>
<ol>
<li>攻击者构造出特殊的 URL，其中包含恶意代码。</li>
<li>用户打开带有恶意代码的 URL。</li>
<li>用户浏览器接收到响应后解析执行，前端 JavaScript 取出 URL 中的恶意代码并执行。</li>
<li>恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。</li>
</ol>
<p>DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。</p>
<h2 id="3-XSS-攻击的预防"><a href="#3-XSS-攻击的预防" class="headerlink" title="3.XSS 攻击的预防"></a>3.XSS 攻击的预防</h2><p>通过前面的介绍可以得知，XSS 攻击有两大要素：</p>
<ol>
<li>攻击者提交恶意代码。</li>
<li>浏览器执行恶意代码。</li>
</ol>
<p>针对第一个要素：我们是否能够在用户输入的过程，过滤掉用户输入的恶意代码呢？</p>
<h3 id="输入过滤"><a href="#输入过滤" class="headerlink" title="输入过滤"></a>输入过滤</h3><p>在用户提交时，由前端过滤输入，然后提交到后端。这样做是否可行呢？</p>
<p>答案是不可行。一旦攻击者绕过前端过滤，直接构造请求，就可以提交恶意代码了。</p>
<p>那么，换一个过滤时机：后端在写入数据库前，对输入进行过滤，然后把“安全的”内容，返回给前端。这样是否可行呢？</p>
<p>问题是：在提交阶段，我们并不确定内容要输出到哪里。</p>
<p>（此处忽略详细介绍）</p>
<p>输入侧过滤能够在某些情况下解决特定的 XSS 问题，<strong>但会引入很大的不确定性和乱码问题</strong>。在防范 XSS 攻击时应避免此类方法。</p>
<p>当然，对于明确的输入类型，例如数字、URL、电话号码、邮件地址等等内容，进行输入过滤还是必要的。</p>
<p>既然输入过滤并非完全可靠，我们就要通过“防止浏览器执行恶意代码”来防范 XSS。这部分分为两类：</p>
<ul>
<li>防止 HTML 中出现注入。</li>
<li>防止 JavaScript 执行时，执行恶意代码。</li>
</ul>
<h3 id="预防存储型和反射型-XSS-攻击"><a href="#预防存储型和反射型-XSS-攻击" class="headerlink" title="预防存储型和反射型 XSS 攻击"></a>预防存储型和反射型 XSS 攻击</h3><p>存储型和反射型 XSS 都是在服务端取出恶意代码后，插入到响应 HTML 里的，攻击者刻意编写的“数据”被内嵌到“代码”中，被浏览器所执行。</p>
<p>预防这两种漏洞，有两种常见做法：</p>
<ul>
<li>改成纯前端渲染，把代码和数据分隔开。</li>
<li>对 HTML 做充分转义。</li>
</ul>
<h3 id="纯前端渲染"><a href="#纯前端渲染" class="headerlink" title="纯前端渲染"></a>纯前端渲染</h3><p>纯前端渲染的过程：</p>
<ol>
<li>浏览器先加载一个静态 HTML，此 HTML 中不包含任何跟业务相关的数据。</li>
<li>然后浏览器执行 HTML 中的 JavaScript。</li>
<li>JavaScript 通过 Ajax 加载业务数据，调用 DOM API 更新到页面上。</li>
</ol>
<p>在纯前端渲染中，我们会明确的告诉浏览器：下面要设置的内容是文本（<code>.innerText</code>），还是属性（<code>.setAttribute</code>），还是样式（<code>.style</code>）等等。浏览器不会被轻易的被欺骗，执行预期外的代码了。</p>
<p>但纯前端渲染还需注意避免 DOM 型 XSS 漏洞（例如 <code>onload</code> 事件和 <code>href</code> 中的 <code>javascript:xxx</code> 等，请参考下文”预防 DOM 型 XSS 攻击“部分）。</p>
<p>在很多内部、管理系统中，采用纯前端渲染是非常合适的。但对于性能要求高，或有 SEO 需求的页面，我们仍然要面对拼接 HTML 的问题。</p>
<h3 id="转义-HTML"><a href="#转义-HTML" class="headerlink" title="转义 HTML"></a>转义 HTML</h3><p>如果拼接 HTML 是必要的，就需要采用合适的转义库，对 HTML 模板各处插入点进行充分的转义。</p>
<p>常用的模板引擎，如 doT.js、ejs、FreeMarker 等，对于 HTML 转义通常只有一个规则，就是把 <code>&amp; &lt; &gt; &quot; &#39; /</code> 这几个字符转义掉，确实能起到一定的 XSS 防护作用，但并不完善：</p>
<table>
<thead>
<tr>
<th>XSS 安全漏洞</th>
<th>简单转义是否有防护作用</th>
</tr>
</thead>
<tbody><tr>
<td>HTML 标签文字内容</td>
<td>有</td>
</tr>
<tr>
<td>HTML 属性值</td>
<td>有</td>
</tr>
<tr>
<td>CSS 内联样式</td>
<td>无</td>
</tr>
<tr>
<td>内联 JavaScript</td>
<td>无</td>
</tr>
<tr>
<td>内联 JSON</td>
<td>无</td>
</tr>
<tr>
<td>跳转链接</td>
<td>无</td>
</tr>
</tbody></table>
<p>所以要完善 XSS 防护措施，我们要使用更完善更细致的转义策略。</p>
<p>例如 Java 工程里，常用的转义库为 <code>org.owasp.encoder</code></p>
<p>（此处省略详情）</p>
<p>HTML 的编码是十分复杂的，在不同的上下文里要使用相应的转义规则。</p>
<h3 id="预防-DOM-型-XSS-攻击"><a href="#预防-DOM-型-XSS-攻击" class="headerlink" title="预防 DOM 型 XSS 攻击"></a>预防 DOM 型 XSS 攻击</h3><p>DOM 型 XSS 攻击，实际上就是网站前端 JavaScript 代码本身不够严谨，把不可信的数据当作代码执行了。</p>
<p>在使用 <code>.innerHTML</code>、<code>.outerHTML</code>、<code>document.write()</code> 时要特别小心，不要把不可信的数据作为 HTML 插到页面上，而应尽量使用 <code>.textContent</code>、<code>.setAttribute()</code> 等。</p>
<p>如果用 Vue/React 技术栈，并且不使用 <code>v-html</code>/<code>dangerouslySetInnerHTML</code> 功能，就在前端 render 阶段避免 <code>innerHTML</code>、<code>outerHTML</code> 的 XSS 隐患。</p>
<p>DOM 中的内联事件监听器，如 <code>location</code>、<code>onclick</code>、<code>onerror</code>、<code>onload</code>、<code>onmouseover</code> 等，<code>&lt;a&gt;</code> 标签的 <code>href</code> 属性，JavaScript 的 <code>eval()</code>、<code>setTimeout()</code>、<code>setInterval()</code> 等，都能把字符串作为代码运行。如果不可信的数据拼接到字符串中传递给这些 API，很容易产生安全隐患，请务必避免。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 内联事件监听器中包含恶意代码 --&gt;</span><br><span class="line">&lt;img onclick&#x3D;&quot;UNTRUSTED&quot; onerror&#x3D;&quot;UNTRUSTED&quot; src&#x3D;&quot;data:image&#x2F;png,&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 链接内包含恶意代码 --&gt;</span><br><span class="line">&lt;a href&#x3D;&quot;UNTRUSTED&quot;&gt;1&lt;&#x2F;a&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">&#x2F;&#x2F; setTimeout()&#x2F;setInterval() 中调用恶意代码</span><br><span class="line">setTimeout(&quot;UNTRUSTED&quot;)</span><br><span class="line">setInterval(&quot;UNTRUSTED&quot;)</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; location 调用恶意代码</span><br><span class="line">location.href &#x3D; &#39;UNTRUSTED&#39;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F; eval() 中调用恶意代码</span><br><span class="line">eval(&quot;UNTRUSTED&quot;)</span><br><span class="line">&lt;&#x2F;script&gt;</span><br></pre></td></tr></table></figure>

<p>如果项目中有用到这些的话，一定要避免在字符串中拼接不可信数据。</p>
<h1 id="CSRF"><a href="#CSRF" class="headerlink" title="CSRF"></a>CSRF</h1><p>Cross-site request forgery：跨站请求伪造</p>
<p>冒充用户在站内的正常操作，让用户在本机(拥有身份cookie的浏览器端)发起用户所不知道的请求</p>
<p>防范：</p>
<p>主要是在服务器端：</p>
<p>1.服务器验证请求头 refer字段</p>
<p>2.加token</p>
<p>3.加验证码</p>
<h2 id="1-什么是CSRF"><a href="#1-什么是CSRF" class="headerlink" title="1.什么是CSRF"></a>1.什么是CSRF</h2><p>CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。</p>
<p>一个典型的CSRF攻击有着如下的流程：</p>
<ul>
<li><a target="_blank" rel="noopener" href="http://受害者登录a.com/">受害者登录a.com</a>，并保留了登录凭证（Cookie）。</li>
<li><a target="_blank" rel="noopener" href="http://攻击者引诱受害者访问了b.com/">攻击者引诱受害者访问了b.com</a>。</li>
<li><a target="_blank" rel="noopener" href="http://b.com/">b.com</a> 向 <a target="_blank" rel="noopener" href="http://a.com/">a.com</a> 发送了一个请求：<a target="_blank" rel="noopener" href="http://a.com/act=xx%E3%80%82%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BC%9A%E9%BB%98%E8%AE%A4%E6%90%BA%E5%B8%A6a.com%E7%9A%84Cookie%E3%80%82">a.com/act=xx。浏览器会…</a></li>
<li>a.com接收到请求后，对请求进行验证，并确认是受害者的凭证，误以为是受害者自己发送的请求。</li>
<li>a.com以受害者的名义执行了act=xx。</li>
<li>攻击完成，攻击者在受害者不知情的情况下，冒充受害者，让a.com执行了自己定义的操作。</li>
</ul>
<h2 id="2-几种常见的攻击类型"><a href="#2-几种常见的攻击类型" class="headerlink" title="2.几种常见的攻击类型"></a>2.几种常见的攻击类型</h2><ul>
<li>GET类型的CSRF</li>
</ul>
<p>GET类型的CSRF利用非常简单，只需要一个HTTP请求，一般会这样利用：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"> &lt;img src&#x3D;&quot;http:&#x2F;&#x2F;bank.example&#x2F;withdraw?amount&#x3D;10000&amp;for&#x3D;hacker&quot; &gt; </span><br><span class="line">复制代码</span><br></pre></td></tr></table></figure>

<p>在受害者访问含有这个img的页面后，浏览器会自动向<code>http://bank.example/withdraw?account=xiaoming&amp;amount=10000&amp;for=hacker</code>发出一次HTTP请求。bank.example就会收到包含受害者登录信息的一次跨域请求。</p>
<ul>
<li>POST类型的CSRF</li>
</ul>
<p>这种类型的CSRF利用起来通常使用的是一个自动提交的表单，如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"> &lt;form action&#x3D;&quot;http:&#x2F;&#x2F;bank.example&#x2F;withdraw&quot; method&#x3D;POST&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;hidden&quot; name&#x3D;&quot;account&quot; value&#x3D;&quot;xiaoming&quot; &#x2F;&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;hidden&quot; name&#x3D;&quot;amount&quot; value&#x3D;&quot;10000&quot; &#x2F;&gt;</span><br><span class="line">    &lt;input type&#x3D;&quot;hidden&quot; name&#x3D;&quot;for&quot; value&#x3D;&quot;hacker&quot; &#x2F;&gt;</span><br><span class="line">&lt;&#x2F;form&gt;</span><br><span class="line">&lt;script&gt; document.forms[0].submit(); &lt;&#x2F;script&gt; </span><br></pre></td></tr></table></figure>

<p>访问该页面后，表单会自动提交，相当于模拟用户完成了一次POST操作。</p>
<p>POST类型的攻击通常比GET要求更加严格一点，但仍并不复杂。任何个人网站、博客，被黑客上传页面的网站都有可能是发起攻击的来源，后端接口不能将安全寄托在仅允许POST上面。</p>
<ul>
<li>链接类型的CSRF</li>
</ul>
<p>链接类型的CSRF并不常见，比起其他两种用户打开页面就中招的情况，这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接，或者以广告的形式诱导用户中招，攻击者通常会以比较夸张的词语诱骗用户点击，例如：</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href&#x3D;&quot;http:&#x2F;&#x2F;test.com&#x2F;csrf&#x2F;withdraw.php?amount&#x3D;1000&amp;for&#x3D;hacker&quot; taget&#x3D;&quot;_blank&quot;&gt;</span><br><span class="line">重磅消息！！</span><br><span class="line">&lt;a&#x2F;&gt;</span><br></pre></td></tr></table></figure>

<p>由于之前用户登录了信任的网站A，并且保存登录状态，只要用户主动访问上面的这个PHP页面，则表示攻击成功。</p>
<h2 id="3-CSRF的特点"><a href="#3-CSRF的特点" class="headerlink" title="3.CSRF的特点"></a>3.CSRF的特点</h2><ul>
<li>攻击一般发起在第三方网站，而不是被攻击的网站。被攻击的网站无法防止攻击发生。</li>
<li>攻击利用受害者在被攻击网站的登录凭证，冒充受害者提交操作；而不是直接窃取数据。</li>
<li>整个过程攻击者并不能获取到受害者的登录凭证，仅仅是“冒用”。</li>
<li>跨站请求可以用各种方式：图片URL、超链接、CORS、Form提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中，难以进行追踪。</li>
</ul>
<p>CSRF通常是跨域的，因为外域通常更容易被攻击者掌控。但是如果本域下有容易被利用的功能，比如可以发图和链接的论坛和评论区，攻击可以直接在本域下进行，而且这种攻击更加危险。</p>
<h2 id="4-防护策略"><a href="#4-防护策略" class="headerlink" title="4.防护策略"></a>4.防护策略</h2><p>CSRF通常从第三方网站发起，被攻击的网站无法防止攻击发生，只能通过增强自己网站针对CSRF的防护能力来提升安全性。</p>
<p>上文中讲了CSRF的两个特点：</p>
<ul>
<li>CSRF（通常）发生在第三方域名。</li>
<li>CSRF攻击者不能获取到Cookie等信息，只是使用。</li>
</ul>
<p>针对这两点，我们可以专门制定防护策略，如下：</p>
<ul>
<li>阻止不明外域的访问<ul>
<li>同源检测</li>
<li>Samesite Cookie</li>
</ul>
</li>
<li>提交时要求附加本域才能获取的信息<ul>
<li>CSRF Token</li>
<li>双重Cookie验证</li>
</ul>
</li>
</ul>
<p>各种防护方法做详细说明：省略</p>
<h1 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h1><p>美团前端安全系列（一）：如何防止XSS攻击？：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903685122703367">https://juejin.cn/post/6844903685122703367</a></p>
<p>美团前端安全系列之二：如何防止CSRF攻击？：<a target="_blank" rel="noopener" href="https://juejin.cn/post/6844903689702866952">https://juejin.cn/post/6844903689702866952</a></p>
<h1 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h1><p>XSS是跨站脚本攻击(Cross-Site Scripting)，通过在目标网站注入恶意代码，使它在浏览器上执行，并通过这些恶意代码获取用户敏感信息(Cookie，SessionID)。XSS分为三种类型：存储型，反射型，DOM型，</p>
<p>CSRF是跨站请求伪造(Cross-site request forgery)，诱导用户进入第三方网站，在第三方网站向被攻击网站发送跨站请求，利用用户在被攻击网站已获取的注册凭证，冒充用户对被攻击网站执行某些操作</p>

        </div>

        

        
            <ul class="post-tags-box">
                
                    <li class="tag-item">
                        <a href="/tags/XSS-CSRF/">#XSS,CSRF</a>&nbsp;
                    </li>
                
            </ul>
        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/2021/06/01/%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%BD%91%E7%BB%9C-%E4%BD%93%E7%B3%BB%E7%BB%93%E6%9E%84/"
                        >
                            <span class="left arrow-icon flex-center">
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">计算机网络-体系结构</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/2021/05/20/ES6-Set,Map/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">ES6-Set,Map</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center">
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                
            </div>

        </div>

        <div class="page-main-content-bottom">
            <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span>
              -
            
            2022&nbsp;<i class="fas fa-heart icon-animate"></i>&nbsp;<a href="/">Tckapco</a>
        </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a>&nbsp;|&nbsp;Theme&nbsp;<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.5</a>
        </div>
        
        
    </div>
</footer>

        </div>
    </div>

    
        <div class="post-tools">
            <div class="post-tools-container">
    <ul class="tools-list">
        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

        <!-- go comment -->
        
    </ul>
</div>

        </div>
    

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">
    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        
            <li class="tools-item tool-scroll-to-top flex-center">
                <i class="fas fa-arrow-up"></i>
            </li>
        

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="exposed-tools-list">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>
        
    </ul>
</div>

    </div>

    
        <aside class="page-aside">
            <div class="post-toc-wrap">
    <div class="post-toc">
        <ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#XSS"><span class="nav-number">1.</span> <span class="nav-text">XSS</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AF-XSS%EF%BC%9F"><span class="nav-number">1.1.</span> <span class="nav-text">1.什么是 XSS？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-XSS-%E5%88%86%E7%B1%BB"><span class="nav-number">1.2.</span> <span class="nav-text">2.XSS 分类</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%AD%98%E5%82%A8%E5%9E%8B-XSS"><span class="nav-number">1.2.1.</span> <span class="nav-text">存储型 XSS</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E5%8F%8D%E5%B0%84%E5%9E%8B-XSS"><span class="nav-number">1.2.2.</span> <span class="nav-text">反射型 XSS</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#DOM-%E5%9E%8B-XSS"><span class="nav-number">1.2.3.</span> <span class="nav-text">DOM 型 XSS</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-XSS-%E6%94%BB%E5%87%BB%E7%9A%84%E9%A2%84%E9%98%B2"><span class="nav-number">1.3.</span> <span class="nav-text">3.XSS 攻击的预防</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BE%93%E5%85%A5%E8%BF%87%E6%BB%A4"><span class="nav-number">1.3.1.</span> <span class="nav-text">输入过滤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%84%E9%98%B2%E5%AD%98%E5%82%A8%E5%9E%8B%E5%92%8C%E5%8F%8D%E5%B0%84%E5%9E%8B-XSS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.2.</span> <span class="nav-text">预防存储型和反射型 XSS 攻击</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E7%BA%AF%E5%89%8D%E7%AB%AF%E6%B8%B2%E6%9F%93"><span class="nav-number">1.3.3.</span> <span class="nav-text">纯前端渲染</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%BD%AC%E4%B9%89-HTML"><span class="nav-number">1.3.4.</span> <span class="nav-text">转义 HTML</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E9%A2%84%E9%98%B2-DOM-%E5%9E%8B-XSS-%E6%94%BB%E5%87%BB"><span class="nav-number">1.3.5.</span> <span class="nav-text">预防 DOM 型 XSS 攻击</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#CSRF"><span class="nav-number">2.</span> <span class="nav-text">CSRF</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%BB%80%E4%B9%88%E6%98%AFCSRF"><span class="nav-number">2.1.</span> <span class="nav-text">1.什么是CSRF</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%87%A0%E7%A7%8D%E5%B8%B8%E8%A7%81%E7%9A%84%E6%94%BB%E5%87%BB%E7%B1%BB%E5%9E%8B"><span class="nav-number">2.2.</span> <span class="nav-text">2.几种常见的攻击类型</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-CSRF%E7%9A%84%E7%89%B9%E7%82%B9"><span class="nav-number">2.3.</span> <span class="nav-text">3.CSRF的特点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E9%98%B2%E6%8A%A4%E7%AD%96%E7%95%A5"><span class="nav-number">2.4.</span> <span class="nav-text">4.防护策略</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%82%E8%80%83"><span class="nav-number">3.</span> <span class="nav-text">参考</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%80%BB%E7%BB%93"><span class="nav-number">4.</span> <span class="nav-text">总结</span></a></li></ol>
    </div>
</div>
        </aside>
    

    <div class="image-viewer-container">
    <img src="">
</div>


    

</main>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/dark-light-toggle.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/code-copy.js"></script>




<div class="post-scripts">
    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/left-side-toggle.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.4.5/source/js/toc.js"></script>
    
</div>



</body>
</html>
